


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    {{hello}}
    <school></school>
    <hr>
    <pet></pet>
    <pet></pet>
    <hello></hello>
</div>

<div id="root2">
    <hello></hello>
</div>
<script type="text/javascript">
    <!--    组件-->
    const school = Vue.extend({
        template: `
          <div>
            <h2>学校名称：{{ schoolName }}</h2>
            <h2>学校地址：{{ schoolAddress }}</h2>
          </div>
        `,
        data() {
            return {
                schoolName: "非常学院",
                schoolAddress: "华丽街001号",
            }
        }
    });

    // 组件
    const pet = Vue.extend({
        template: `
          <div>
            <h2>宠物名称：{{ petName }}</h2>
            <h2>宠物年龄：{{ petAge }}</h2>
          </div>
        `,
        data() {
            return {
                petName: "luckly",
                petAge: 3
            }
        }
    });

    // 组件
    const hello = Vue.extend({
        template: `
          <div>
            <h2>{{ name }}</h2>
          </div>
        `,
        data() {
            return {
                name: "你好啊！",
            }
        }
    });

    // 全局注册
    Vue.component('hello', hello)

    new Vue({
        el: '#root',
        data: {
            hello: "你好啊！",
        },
        // 局部注册组件
        components: {
            school,
            pet
        }
    });

    // 可以使用全局注册的组件
    new Vue({
        el: '#root2'
    })
</script>

</body>
</html>
